<!-- 指标分析 -->
<template>
  <div class="w-full h-full px-6 pt-6 pb-2 flex flex-col">
    <SearchForm
      :form-data="queryInfo"
      :form-item="formItem"
      @clear-form="clearForm"
      @search-form="search"
    ></SearchForm>
    <Box class="flex-1" title="订单" @footer-height="getFooterHeight">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        size="small"
        :scroll="{ y: tableHeight }"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button v-show="record.status == 1" type="link" @click="cancelOrder(record.id)">
              取消订单
            </a-button>
            <a-button v-show="record.status == 1" type="link" @click="payOrder(record.id)">
              支付订单
            </a-button>
            <a-popconfirm title="确定删除吗?" @confirm="deleteOrder(record.id)">
              <a-button type="link">删除订单</a-button>
            </a-popconfirm>
            <a-button type="link" @click="openModal(record)">详情</a-button>
          </template>
        </template>
      </a-table>
    </Box>
    <a-modal v-model:visible="visible" title="订单详情" :footer="null">
      <div class="w-full h-full flex flex-col gap-2">
        <template v-if="shopCart.length > 0">
          <div v-for="item in shopCart" :key="item.id" class="flex justify-around gap-2">
            <div class="flex-1">商品:{{ item.productName }}</div>
            <div class="flex-1">数量:{{ item.buyCount }}</div>
            <div class="flex-1">总价:{{ item.buyCount * item.money }}</div>
          </div>
        </template>
        <template v-else>
          <div class="w-full flex justify-center items-center text-lg">还未添加商品</div>
        </template>
        <div v-if="shopCart.length > 0" class="mt-4 flex items-center justify-center">
          <div>地址：</div>
          <a-input v-model:value="address" class="flex-1" disabled></a-input>
        </div>
        <footer v-if="shopCart.length > 0" class="flex flex-col gap-2 text-lg text-blue-500">
          <div class="w-full flex justify-end">总价：{{ totalMoney }}</div>
          <!-- <a-button type="primary" size="small" @click="addOrder">确认下单</a-button> -->
        </footer>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, computed, ref } from 'vue'
import SearchForm from '@/components/form/Index.vue'
import { queryOrderListApi, payOrderApi, deleteOrderApi, cancelOrderApi } from '@/api/order'
import { queryOneAddressApi } from '@/api/address'
import Box from '@/components/box/Index.vue'
const queryInfo = ref({
  pageNo: 1,
  pageSize: 20
})
const statusArr = [
  { itemValue: 1, itemText: '待付款' },
  { itemValue: 2, itemText: '已付款' },
  { itemValue: 3, itemText: '已取消' }
]
const formItem = ref(
  [
    {
      label: '订单状态',
      type: 'select',
      name: 'status',
      optionsConfig: {
        option: statusArr,
        optionValue: 'itemValue',
        optionLabel: 'itemText'
      }
    },
    {
      label: '时间',
      type: 'range',
      name: 'startAndEndTime',
      filedType: Array
    }
  ].map((item) => {
    return item
  })
)
const pagination = ref({
  current: 1,
  pageSize: 20,
  pageSizeOptions: ['10', '20', '30'],
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: (total, range) => {
    return range[0] + '-' + range[1] + ' 共' + total + '条'
  },
  total: 0
})
const tableHeight = ref(0)
const getFooterHeight = (val) => {
  tableHeight.value = val - 110
}
const handleTableChange = (paginationInfo) => {
  queryInfo.value.pageNo = paginationInfo.current
  queryInfo.value.pageSize = paginationInfo.pageSize
  getTableData()
}
const search = (formData) => {
  queryInfo.value = {
    pageNo: 1,
    pageSize: 20,
    status: formData.status
  }
  if (formData.startAndEndTime && formData.startAndEndTime?.length) {
    queryInfo.value.startTime = formData.startAndEndTime[0]
    queryInfo.value.endTime = formData.startAndEndTime[1]
  }
  getTableData()
}
const clearForm = () => {
  queryInfo.value = {
    pageNo: 1,
    pageSize: 20
  }
  getTableData()
}
const columns = [
  { title: '订单号', dataIndex: 'orderNumber', key: 'orderNumber' },
  {
    title: '总金额',
    dataIndex: 'totalMoney',
    key: 'totalMoney'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }) => {
      let name = ''
      statusArr.forEach((item) => {
        if (item.itemValue == text) {
          name = item.itemText
        }
      })
      return name
    }
  },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '操作', dataIndex: 'operation', key: 'operation' }
].map((item) => {
  item.ellipsis = true
  if (!item?.align) {
    item.align = 'center'
  }
  return item
})
const tableData = ref([])

const getTableData = async () => {
  const { result, total, pageNo, pageSize } = await queryOrderListApi(queryInfo.value)
  tableData.value = result
  pagination.value.total = total
  pagination.value.current = pageNo
  pagination.value.pageSize = pageSize
}

const payOrder = async (id) => {
  await payOrderApi({ id })
  getTableData()
}

const deleteOrder = async (id) => {
  await deleteOrderApi({ id })
  getTableData()
}

const cancelOrder = async (id) => {
  await cancelOrderApi({ id })
  getTableData()
}

const openModal = async (record) => {
  const { result } = await queryOneAddressApi({ id: record.addressId })
  result?.address ? (address.value = result.address) : (address.value = '')
  visible.value = true
  shopCart.value = record.orderDetailResponseDtoList
}
const address = ref()
const visible = ref(false)
const shopCart = ref([])
const totalMoney = computed(() => {
  let money = 0
  if (shopCart.value.length === 0) {
    money = 0
  } else {
    shopCart.value.forEach((item) => {
      money += item.money * item.buyCount
    })
  }
  return money
})

onMounted(async () => {
  getTableData()
})
</script>

<style lang="less" scoped></style>
